<template>
	<el-container>
		<el-container>
			<el-header>
				<div class="left-panel">
					<span style="font-size: 18px;font-weight: 600">我的收文列表</span>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">
						<el-input v-model="search.keyword" placeholder="收文名称 / 表单名称" clearable></el-input>
						<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					</div>
				</div>
			</el-header>
			<el-main>
				<el-row :gutter="15">
					<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in bpmFlowList" :key="item.flowId">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="code-item">
								<div class="img" :style="`background-image: -webkit-linear-gradient(top left, #fff, ${item.color} 100px)`" @click="startBpm(item.flowId)">
									<h2 style="color: white">{{ item.flowName }}</h2>
								</div>
								<div class="title">
									<h4 style="width: 100%;text-align: right;">管理员:{{ item.createUserName }}</h4>
								</div>
								<div class="opt-div" title="收文预览" @click="flowChartPreview(item.flowId)">
									<el-icon>
										<sc-icon-organization/>
									</el-icon>
								</div>
								<div class="opt-div" title="表单预览" @click="preview(item.formId)">
									<el-icon>
										<el-icon-view/>
									</el-icon>
								</div>
								<div class="opt-div" title="收文说明" @click="showBpmRemark(item)">
									<el-icon>
										<el-icon-info-filled/>
									</el-icon>
								</div>
								<div class="opt-div" title="创建收文" @click="startBpm(item.flowId)">
									<el-icon>
										<el-icon-promotion/>
									</el-icon>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</el-container>
	<send-dialog v-if="dialog.sendDialog" ref="sendDialog" @closed="dialog.sendDialog=false"></send-dialog>

</template>
<script>

import sendDialog from "./sendDialog";

export default {
	name: 'BpmFlow',
	components: {
		sendDialog
	},
	data() {
		return {
			dialog: {
				sendDialog: false,
			},
			showGrouploading: false,
			groupFilterText: '',
			bpmSortList: [],
			search: {
				model:'1',
				isDoc:'1',
				keyword: ""
			},
			bpmFlowList: []
		}
	},
	mounted() {
		this.getMyBpmFlowList();
	},
	methods: {
		//树点击事件
		async getMyBpmFlowList() {
			var res = await this.$API.bpm.bpmFlow.getMyBpmFlowList.get({model:'1',isDoc:'2'});
			if (res.code == 200) {
				this.bpmFlowList = res.data;
			}
		},
		async upsearch() {
			var res = await this.$API.bpm.bpmFlow.getMyBpmFlowList.get({keyword: this.search.keyword});
			if (res.code == 200) {
				this.bpmFlowList = res.data;
			}
		},
		showBpmRemark(item) {
			var remark = "暂无";
			if (item.remark) {
				remark = item.remark;
			}
			this.$alert(remark, '收文说明', {
				confirmButtonText: '确定',
			});
		},
		startBpm(flowId) {
			this.dialog.sendDialog = true
			this.$nextTick(() => {
				this.$refs.sendDialog.open().setData({flowId: flowId})
			})
		},
		preview(formId) {
			this.$nextTick(() => {
				window.open('/#/doc/setting/bpmform/preview?formId=' + formId+"&ddtab=true", "_blank");
			})
		},
		flowChartPreview(flowId) {
			this.$nextTick(() => {
				this.$router.replace({
					path: '/doc/setting/bpmflow/flowchartpreview',
					query: {
						flowId:flowId
					}
				})
			})
		},
	}
}
</script>
<style scoped>
.custom-tree-node {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node .do {
	margin-left: 10px;
	display: none;
}

.custom-tree-node:hover .code {
	display: none;
}

.custom-tree-node:hover .do {
	margin-left: 10px;
	display: inline-block;
}

.el-card {
	margin-bottom: 15px;
}

.code-item {
	cursor: pointer;
}

.code-item .img {
	width: 100%;
	height: 100px;
	background: linear-gradient(to right, #409eff, #f56c6c);
	display: flex;
	align-items: center;
	justify-content: center;
}

.code-item .img i {
	font-size: 100px;
	color: #fff;
	background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.code-item .title {
	padding: 10px;
	display: flex;
}

.code-item .title h4 {
	font-size: 12px;
	color: #999;
	font-weight: normal;
	margin-top: 5px;
}

.opt-div {
	font-size: 16px;
	width: 25%;
	display: inline-block;
	margin: 5px 0px 10px 0px;
	text-align: center;
}
</style>
